<template>
  <div>
    <div v-if="chenload">
			<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
				<div class="inforline"></div>
				<!--金牌销售-->
				<div class="infotitle" @click="xiaoxi()">
					<div class="xiaoleft">
						<img src="../../../src/assets/img/infor.png" alt="">
						<span>消息通知</span>
					</div>
					<div class="xiaoright">
						<!-- <span class="xiaoinfor">111</span> -->
						<!-- <span v-if="(count==0||count=='0')&&(Number(count<99))" class="xiaoinfor">99+</span> -->
						<span v-if="(count!=0||count!='0')&&(Number(count<99))" class="xiaoinfor">{{count}}</span>
						<span v-if="(count!=0||count!='0')&&(Number(count>=99))" class="xiaoinfor">99+</span>
						<img src="../../../src/assets/img/person/rightjiantou.png" alt="">
					</div>
				</div>
				
				<div class="inforline"></div>
				<!--认证讲师-->
				<div class="xiaoshou">
					<span>认证讲师</span>
					<span class="span1" @click="teacher()">讲师中心</span>
				</div>
				<div class="teacher">
					<div v-for="(item,index) in teachers" @click="te(item)">
						<img :src="img+item.avatar" alt="">
						<p>{{item.name}}</p>
					</div>
				</div>

				<div class="inforline"></div>
				<!--最新动态-->
				<div class="concon" v-if="tab0.list.length!=0||tab0.list.length!='0'">
					<div class="con">
						<p class="p1">最新动态</p>
						
						<!-- <mt-loadmore :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmoredetail"> -->
							<div>
								<div class="ke" v-for="(item,index) in tab0.list"  @click="huodong(item)">
									<img :src="img+item.images" alt="" class="img1">
									<p>{{item.title}}</p>
									<div class="bto">
										<img src="../../../src/assets/img/faxian/shenglue.png" alt="">
										<span>{{item.comment}}</span>
										<img src="../../../src/assets/img/shouye/yan.png" alt="">
										<span>{{item.reading}}</span>
										<span>{{item.addtime}}</span>
									</div>
									<p style="width: 100%;height: 0.02rem;background: #EDEDED;margin-top: 0.2rem;"></p>
								</div>
							</div>
						<!-- </mt-loadmore> -->


					</div>
				</div>
				
					<!-- 登录弹窗 -->
					<div class="shoewr-chenhoupass">
						<div class="chen-contener chenpass">
							<p class="chen-title">提示</p>
							<p class="chen-text chen-textactive">您需要先登录?</p>
							<div class="chen-but">
								<p class="chen-but-no" @click="repeatclose()">取消</p>
								<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
							</div>
						</div>
					</div>
				<!-- <Footer v-if="!this.$route.query.nav"></Footer> -->
		   </mescroll-vue>
		</div>
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>
		<Footer></Footer>
  </div>

</template>

<script>
  import { ImagePreview } from 'vant';
  import Footer from '@/components/home/Footer'
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
	// 引入mescroll的vue组件
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
      name: "found",
      components:{
        Footer,
				MescrollVue
      },
      data(){
          return{
						chenload:false,
						tabType: 0 ,// 菜单类型
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
            arr:[],
            imgs:[],
            dongtai:[],
            img:this.$store.state.img,
            teachers:[],
						count:0,
						msgcount:'',
						allLoaded:false,
						page:1,
          }
      },
      methods:{
				// 点击取消
				repeatclose(){
					$('.shoewr-chenhoupass').fadeOut();
				},
				// 点击去登录
				repeatclick(){
					$('.shoewr-chenhoupass').fadeOut();
					this.d();
				},
				xiaoxi(){
				  if (localStorage.getItem('token')) {
						// console.log()
				    this.$router.push({
				      path:'/xiaoxi',
							query:{
								likecount:this.msgcount.like_count,
								accountcount:this.msgcount.account_count
							}
				    })
				  }else{
						$('.shoewr-chenhoupass').fadeIn();
				  }
				},
        te(item){
          this.$router.push({
            path:'/steach',
            query:{
              id:item.id
            }
          })
        },
				// 消息通知数量接口
				msgCount(){

					this.axios.get(this.$store.state.url +'User/msgCount').then(res=>{
						this.chenload=true;
						if (res.data.errcode == 0||res.data.errcode == '0'){
							// console.log(res.data);
							this.msgcount = res.data.data;
							this.count = res.data.data.count;
						}
					})

				},
        huodong(item){
          this.$router.push({
            path:'/huodong',
            query:{
              id:item.id
            }
          })
        },
        btn(index){
          this.imgs = [];
          for (var i = 0;i<this.arr.length;i++){
            this.imgs.push(this.img+this.arr[i].qr_code)

          }
            ImagePreview({
              images:this.imgs,
              startPosition: index,
              onClose() {
                // do something
              }
            });
        },
        teacher(){
          this.$router.push({
            path:'/teacher'
          })
        },
        kefu(){
          this.$router.push({
            path:'/kefu'
          })
        },
        mescrollInit0 (mescroll) {
          mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
          this.tab0.mescroll = mescroll;
        },
        
        getMescrollUp (tabType) {
          // let emptyWarpId = 'dataList' + tabType;
          return {
            auto: true,
            callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
          }
        },
        upCallback (page, mescroll) {
          if (mescroll.tabType === 0) {
            // 全部
            this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
        		this.axios.get(this.$store.state.url +'Find/actList',{
        			 params:{
        				page: page.num,
        				limit:page.size
        			 }
        		 }).then(res=>{
        							// console.log(res.data.data.class)
        			this.chenload = true;
        			if(res.data.errcode==0||res.data.errcode=='0'){
        			var curPageData = res.data.data;
        				mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        			 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
        			 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
        			 // this.tab0.list=res.data.data.order
        			}
        		
        		})
          }
        },
      },
      mounted(){
				this.sdk.getJSSDK('','',this.$store.state.url);	
        this.loginsuccess();
				this.msgCount();

        //教师推荐
        this.axios.get(this.$store.state.url +'find/teacher').then(res=>{

          // console.log(res.data)
          if (res.data.errcode == 0||res.data.errcode == '0'){
            this.teachers = res.data.data;
          }
        })
        //最新动态
				// this.actList(0);

        
      }
    }
</script>

<style scoped>
	.inforline{
		width: 100%;
		height: .22rem;
		background: #F7F7F7;
	}
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	}
	
	.infotitle{
		width: 92%;
		margin: auto;
		height: 1.08rem;
		line-height: 1.08rem;
		margin-top: 0.2rem;
		display: flex;
		justify-content: space-between;
	}
	.xiaoleft img{
		width: .54rem;
		height: .54rem;
		vertical-align: middle;
	}
	.xiaoleft span{
		display: inline-block;
		color: #333333;
		font-size: .3rem;
		margin-left: .3rem;
	}
	.xiaoright{
		/* width: .1rem;
		height: .2rem; */
	}
	.xiaoinfor{
		/* width: ; */
		display: inline-block;
		line-height: .34rem;
		font-size: .26rem;
		padding: 0 .15rem;
		background: #FE3434;
		color: #fff;
		border-radius: .3rem;
	}
	.xiaoright img{
		width: .1rem;
		height: .2rem;
		vertical-align: middle;
	}
  .swiper-slide{
    text-align: justify;
  }
  .xiaoshou{
    width: 92%;
    margin: auto;
    margin-top: 0.2rem;

  }
  .xiaoshou span:nth-child(1){
    font-size:0.34rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    display: inline-block;
    vertical-align: middle;
  }
  .xiaoshou img{
    width:0.32rem;
    height:0.36rem;
    vertical-align: middle;
    margin-top: 0.03rem;
  }
  .xiaoshou span:nth-child(3){
    font-size:0.24rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    float: right;
    margin-top: 0.05rem;
  }
  .span1{
    font-size:0.24rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    float: right;
    margin-top: 0.05rem;
  }
  /*.gun{*/
    /*width: 100%;*/
    /*overflow-x: scroll;*/
    /*overflow-y: hidden;*/
    /*white-space:nowrap;*/
    /*margin-top: 0.3rem;*/
    /*padding-right: 0.3rem;*/
  /*}*/
  .g{
    width:5.24rem;
    height:1.7rem;
    box-shadow:0 0 0.06rem 0 rgba(71,68,80,0.1);
    border-radius:0.1rem;
    display: inline-block;
    box-sizing: border-box;
    padding: 0.33rem 0.3rem 0.33rem 0.3rem;
  }
  .center{
    width: 100%;
    height: 1.04rem;
  }
  .headImg{
    width: 1.05rem;
    height: 100%;
    border-radius: 50%;
  }
  .phone{
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left: 0.15rem;
  }
  .phone p:nth-child(1){
    font-size:0.28rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.1rem;
  }
  .phone p:nth-child(2){
    margin-top: 0.2rem;
  }
  .phone p:nth-child(2) img{
    width: 0.32rem;
    height: 0.32rem;
    display: inline-block;
    vertical-align:top;
  }
  .phone p:nth-child(2) span{
    font-size:0.24rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .img{
    width: 1.04rem;
    height: 100%;
    float: right;
  }
  .teacher{
    width: 92%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
		padding-bottom: .3rem;
  }
  .teacher div{
    text-align: center;
  }
  .teacher img{
    width:1.1rem;
    height:1.1rem;
    border-radius:0.1rem;
  }
  .teacher p{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    margin-top: 0.1rem;
  }
  .concon{
    padding-bottom: 1.3rem;
  }
  .con{
    width: 92%;
    margin: auto;
    margin-top: 0.5rem;
  }
  .p1{
    font-size:0.34rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .ke{
    width: 100%;
    margin-top: 0.3rem;
  }
  .img1{
    width: 100%;
    height: 3.3rem;
    border-radius:0.08rem;
  }
  .ke p:nth-child(2){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.2rem;
  }
  .bto{
    margin-top: 0.2rem;
  }
  .bto img{
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
  .bto span{
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    vertical-align: middle;
  }
  .bto span:nth-child(5){
    float: right;
  }
</style>
